<template>
  <a-modal
    title="合同预览"
    :visible="visible"
    @cancel="close"
    width="100%"
    style="top: 0; left: 0; margin: 0; height: 100%;"
    :bodyStyle="{ height: 'calc(100vh - 55px)', overflow: 'hidden' }"
  >
    <div class="pdf-container" style="height: 100%;">
      <iframe :src="previewUrl" frameborder="0" width="100%" height="100%"></iframe>
    </div>
  </a-modal>
</template>

<script>
import { Base64 } from 'js-base64';
import store from '@/store';

export default {
  data() {
    return {
      visible: false,
      previewUrl: ''
    };
  },
  methods: {
    open(filePath) {
      this.previewUrl = this.handlePreviewFilePDF(filePath);
      this.visible = true;
      this.requestFullScreen();
    },
    close() {
      this.visible = false;
      this.previewUrl = '';
      this.exitFullScreen();
    },
    handlePreviewFilePDF(rowpath) {
      let realPath = rowpath;
      let base = window._CONFIG.onlinePreviewDomainURL + '/onlinePreview?url=';
      let codename = Base64.encode(realPath);
      let url = base + codename + '&watermarkTxt=' + encodeURIComponent(store.getters.userInfo.username);
      return url;
    },
    requestFullScreen() {
      const modalElement = this.$el.querySelector('.ant-modal');
      if (modalElement.requestFullscreen) {
        modalElement.requestFullscreen();
      } else if (modalElement.mozRequestFullScreen) { // Firefox
        modalElement.mozRequestFullScreen();
      } else if (modalElement.webkitRequestFullscreen) { // Chrome, Safari and Opera
        modalElement.webkitRequestFullscreen();
      } else if (modalElement.msRequestFullscreen) { // IE/Edge
        modalElement.msRequestFullscreen();
      }
    },
    exitFullScreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.mozCancelFullScreen) { // Firefox
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { // IE/Edge
        document.msExitFullscreen();
      }
    }
  }
}
</script>

<style>
.pdf-container {
  background: rgba(255, 255, 255, 0.9); /* 设置背景颜色 */
}
</style>
